<!-- eslint-disable vue/no-template-shadow -->
<template>
  <component
    :is="curEle"
    ref="curNode"
    v-bind="curComProps"
    v-on="curComEvents"
  >
    <template
      v-for="item in curComSlotList"
      :key="item?.slotCode"
      #[item.slotCode]="scopeData"
    >
      <slot :key="item.slotCode" :name="item.slotCode" v-bind="scopeData">
      </slot>
    </template>
  </component>
</template>

<script lang="ts" setup>
import { useDesignEle } from './util'

import type { BwVueIns } from '../../utils/model'
import type { BwCustomComFrontTypeEnum } from '../../enums'
import type { BwCustomComStructModel } from '../../models/dom'
import type { BwGetCustomComInfoFun } from '../../models'

interface BwDesignEleProps {
  vueIns: BwVueIns
  frontType: BwCustomComFrontTypeEnum
  scopeData: Record<string, any>
  nodeInfo: BwCustomComStructModel
  forVars?: Record<string, any>
  extendUtils: Record<string, any>

  getCustomComInfo: BwGetCustomComInfoFun | null

  [key: string]: any
}

const props = withDefaults(defineProps<BwDesignEleProps>(), {})
const {
  curEle,
  curNode,
  curComProps,
  curComEvents,

  exposes,
  curComSlotList,
} = useDesignEle(props)

defineExpose(exposes)
</script>

<style lang="less" scoped>
.bw-custom-com-container {
  display: inline-block !important;
}
</style>
